<!--分页组件页面-->
<template>
  <div class="bg-pagination">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      :layout="layout"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      background>
      <div class="total-info">
        <span class="label">
          共
          <span class="num">{{ total }}</span>
          {{ totalLabel }}
        </span>
        <span class="label">
          共
          <span class="num">{{ (pageSize > 0 && Math.ceil(total / pageSize)) || '0' }}</span>
          页
        </span>
      </div>
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'bgPagination',
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 50, 100]
      },
    },
    layout: {
      type: String,
      default: 'slot,prev, pager, next, jumper',
    },
    totalLabel: {
      type: String,
      default: '条记录',
    },
  },
  data() {
    return {
      pageInfo: {
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      },
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.pageInfo.pageNumber = val
      this.$emit('update:currentPage', val)
      this.$emit('currentChange', val)
      this.handlePageChange()
    },
    // 当前页改变传值
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.$emit('update:pageSize', val)
      this.$emit('sizeChange', val)
      this.handlePageChange()
    },
    handlePageChange() {
      this.$emit('change', this.pageInfo)
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.bg-pagination {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 14px;
  .total-info {
    float: left;
    font-weight: normal;
    .label {
      margin-right: 10px;
      font-size: 14px;
      font-family: 'syht-Light';
    }
    .num {
      font-size: 14px;
      font-family: 'syht-Light';
      min-width: auto;
      color: RGB(19, 108, 202);
    }
  }
  .el-pagination {
    width: 100%;
    text-align: right;
  }
  .go-btn {
    padding: 7px 8px;
  }
  ::v-deep .el-pager {
    li {
      margin: 0 0.02rem;
      border: 0.01rem solid RGB(233, 235, 239);
      background: #fff;
      font-family: 'syht-Light';
      font-size: 14px;
    }
  }
  // ::v-deep .el-pager {
  //   li {
  //     margin: 0 0.02rem;
  //     border: 0.01rem solid RGB(233, 235, 239);
  //     background: #fff;
  //   }
  // }
  ::v-deep .el-pagination button {
    background: transparent;
  }
  ::v-deep .el-pagination__jump {
    margin-left: 0;
    margin-right: 5px;
    font-size: 14px;
    font-family: 'syht-Light';
    .el-pagination__editor.el-input {
      width: 40px !important;
    }
  }
}
</style>
